<template>
    <view class="container">
        <img class="bg" src="../../../static/background.png" alt="" />
        <open-data type="userAvatarUrl" class="avatar avatar-position"/>
        <!-- <buttom open-type="getUserInfo" class="avatar-position">
            <image
                slot="img"
                class="avatar"
                src="../../../static/touxiang.png"
            />
        </buttom> -->
        <!-- <buttom></buttom> -->
        <view class="about-container">
            <view class="about-us"  @click="onJumpToDetail">
                <img src="../../../static/aboutus@2x.png" alt="" />
                <text class="description">关于我们</text>
            </view>
            <view class="about-us">
                <text class="book-num">0</text>
                <text class="description">喜欢的书</text>
            </view>
        </view>

        <view class="like-container">
            <image class="headline" src="../../../static/likezi@2x.png" />
            <view class="preview-container">
                <block>
                    <preview class="preview"></preview>
                </block>
            </view>
        </view>
    </view>
</template>

<script>
import buttom from "@/components/buttom/buttom.vue";
import preview from "@/components/preview/preview.vue";
export default {
    components: {
        buttom,
        preview
    },
    props: {

    },
    data () {
        return {

        }
    },
    methods: {
        onJumpToDetail(){
             uni.navigateTo({
                url: "../../../pages/about/about"
            })
        }
    }
}
</script>

<style lang='scss' scoped>
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bg {
    width: 750rpx;
    height: 574rpx;
}

.avatar-position {
    position: absolute;
    top: 255rpx;
}

.my-img {
    width: 120rpx;
    height: 120rpx;
}

.avatar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.avatar {
    width: 120rpx;
    height: 120rpx;
    overflow: hidden;
    border-radius: 50%;
}

.about-container {
    padding: 0 100rpx;
    width: 550rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: absolute;
    top: 440rpx;
}

.about-us image {
    width: 34rpx;
    height: 34rpx;
}

.preview-container {
    margin-top: 30rpx;
    width: 690rpx;
    display: flex;
    flex-direction: row;
    padding: 0 30rpx;
    flex-wrap: wrap;
    justify-content: space-between;
}

.preview {
    margin-bottom: 30rpx;
}

.about-us {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.book-num {
    font-size: 36rpx;
    color: #000000;
}

.description {
    font-size: 24rpx;
    color: #999999;
}

.about-container > view:nth-child(2) {
    margin-top: -5rpx;
}

.like-container {
    margin-top: -13rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f5f5f5;
}

.headline {
    margin-top: 30rpx;
    width: 97rpx;
    height: 42rpx;
}
</style>
